<template>
  <div class="addForm">
    <div>
      <el-input type="textarea"
                v-model="description"
                @change="changeDesc"
                placeholder="请输入详情描述"
                autosize></el-input>
      <span>{{note}}</span>
    </div>
    <div class="height20"></div>
    <el-radio v-model="radioIndex" label="1">public</el-radio>
    <el-radio v-model="radioIndex" label="2">secret</el-radio>
    <div class="height20"></div>
    <div class="tab-tit clear">
      <TabTit class="fl"
              :item="item"
              :index="index"
              :selected="selected"
              :deleteVisible="deleteVisible"
              :repeatable="repeatable"
              v-for="(item,index) in files"
              :key="index"
              @onchangeTab="onChangeTabHandle(index)">
      </TabTit>
      <span class="gistAdd fl">
            <i class="el-icon-circle-plus-outline" @click="addFile"></i>
      </span>
    </div>
    <File
      :item="item"
      :index="index"
      v-show="selected === index"
      :key="index"
      v-for="(item,index) in files">
    </File>
    <div class="line20"></div>
    <div class="btn">
      <el-button type="primary"
                 size="medium"
                 v-show="addable"
                 :disabled="disabled"
                 @click="saveGist">保存
      </el-button>
    </div>
  </div>
</template>

<script>
  import client from "./../../js/github-client"
  import bus from '@/bus.js'
  import TabTit from '@/components/List/TabTit'
  import File from '@/components/List/File'

  export default {
    name: "AddGist",
    components: {TabTit, File},
    data(){
      return {
        files: [],
        description: "",
        note: "",
        selected: 0,
        current: 0,
        radioIndex: "1",
        newFileIndex: 2,
        repeatable:false,
        disabled:false,
        addable:true
      }
    },
    computed: {
      hideDeleteIcon(){
        return this.files && this.files.length === 1;
      },
      deleteVisible(){
        return this.files.filter(item => !item.deleted).length > 1
      }
    },
    mounted(){
      bus.$on("hideGistDetails",()=>{
        this.hideLoad= true;
        this.hideDetails= true;
      });

      this.files.push({
        filename: "file_1",
        content: ""
      });
      bus.$on("repeatFilename",name=>{
        if(this.files.filter(item=>item.filename === name).length>1){
          this.repeatable = true;
        }
      });
      bus.$on("onDeleteFiles",(index)=>{
//        this.$set(this.fileCRUD,"deletable",true);
//        重新显示index
        var arrFiles=this.files;
        for(var i=0;i<arrFiles.length;i++){
          if(arrFiles[i].deleted === undefined){
            this.selected = i;
            break;
          }
        }
      });
    },
    methods: {
      addFile(){
        this.addable = true;
        var filename = "file_" + this.newFileIndex++;
        this.files.push({
          filename: filename,
          content: "",
        });
        this.selected = this.files.length - 1;
      },
      onChangeTabHandle(index) {
        this.selected = index;
//        bus.$emit("changeContent", index);
      },
      onChangeTab(index){
        this.selected = index;
      },
      deleteFile(index){
        if (index > 0) {
          this.files.splice(index, 1);
        }
      },
      changeDesc(){
        if (this.description === "") {
          this.note = "详情描述不能为空";
          return;
        } else {
          this.note = "";
        }
      },
      saveGist(){
        if (this.description === "") {
          this.note = "详情描述不能为空";
          return;
        } else {
          this.note = "";
        }
        var data = {};
        if (this.radioIndex === '1') {
          data.public = true;
        } else {
          data.public = false;
        }
        data.description = this.description;
        data.files = {};
        this.files.filter(item=>!item.deleted).forEach((item) => {
          data.files[item.filename] = {
            content: item.content
          }
        })
        console.log(data);
        client.post("/gists", data)
          .then((r) => {
            this.selected=0;
            this.addable = false;
            bus.$emit("changeEditContent");
            bus.$emit("addListGist", {
              id: r.data.id,
              description: r.data.description
            });
            this.open();
            this.$router.push({ path: '/gists/gist', query: { id: r.data.id }});
          })
          .catch();
      },
      open(){
        this.$message({
          message: '恭喜你，添加成功',
          type: 'success'
        });
      }
    }
  }
</script>

<style scoped>
  .line20 {
    height: 20px;
  }

  a:hover {
    color: #409eff;
  }
  .gistAdd {
    top: 5px;
    font-weight: normal;
  }
</style>
